<template>
  <view class="u-page__item" v-if="tabbar?.list.length > 0">
    <su-tabbar
      :value="path"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      :inactiveColor="tabbar.inactiveColor"
      :activeColor="tabbar.activeColor"
      :midTabBar="tabbar.mode === 2"
      :customStyle="tabbarStyle"
    >
      <su-tabbar-item
        v-for="(item, index) in tabbar.list"
        :key="item.text"
        :text="item.text"
        :name="item.url"
        :path="path"
        :isCenter="getTabbarCenter(index)"
        :centerImage="sheep.$url.cdn(item.inactiveIcon)"
        :activecenterImage="sheep.$url.cdn(item.activeIcon)"
        @tap="sheep.$router.go(item.url)"
      >
        <template v-slot:active-icon>
          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIcon)"></image>
        </template>
        <template v-slot:inactive-icon>
          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.inactiveIcon)"></image>
        </template>
        <template v-slot:nums>
          <!-- <view class="shuliang" v-if="item.nums&&item.nums!=0">{{ item.nums }}</view> -->
          <view class="shuliang" v-if="count&&count!=0&&item.url=='/pages/index/cart'">{{ count }}</view>
        </template>
        
      </su-tabbar-item>
    </su-tabbar>
  </view>
</template>

<script setup>
  import { computed, unref,watch } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  const tabbar = computed(() => {
    return sheep.$store('app').template.basic?.tabbar;
  });

  const tabbarStyle = computed(() => {
    const backgroundStyle = tabbar.value.background;
    if (backgroundStyle.type == 'color') return { background: backgroundStyle.bgColor };
    if (backgroundStyle.type == 'image')
      return {
        background: `url(${sheep.$url.cdn(
          backgroundStyle.bgImage,
        )}) no-repeat top center / 100% auto`,
      };
  });

  const getTabbarCenter = (index) => {
    if (unref(tabbar).mode !== 2) return false;
    return unref(tabbar).list % 2 > 0
      ? Math.ceil(unref(tabbar).list.length / 2) === index + 1
      : false;
  };

  const props = defineProps(
    {
      tablei:{
        type: Number,
        default: 0,
      },
      path:{
        type: String,
        default: 0,
      }
    }
  );
  const count = computed(() => sheep.$store('cart').count);
  watch(
    () => props.tablei,
    (newValue) => {
      if (newValue) {
        // console.log("76行")
        // console.log(count)
       onFavorite() 
      //  console.log(sheep.$store('cart').count)
      }
    },
    {
      deep: true,
    },
  );
  async function onFavorite() {
    const { code,data } = await sheep.$api.cart.list();
    if (code === 1) {
      // console.log(data)
      let goosnum = data
      let total = 0
      for(let i in goosnum){
        total=Number(total)+Number(goosnum[i].goods_num)
      }
      // console.log(tabbar)
      // console.log(tabbar.value.list)
      let list = tabbar.value.list
      for(let i in list){
        list[i].nums = 0
      }
      list[3].nums = total
      // console.log("~~~")
      // console.log(list)
      tabbar.value.list = list
      // if (state.goodsInfo.favorite) {
      //   state.goodsInfo.favorite = 0;
      // } else {
      //   state.goodsInfo.favorite = 1;
      // }
    }
  }
  onShow(() => {
    // console.log("lklklk")
    onFavorite()
  });
</script>

<style lang="scss">
  .u-page {
    padding: 0;

    &__item {
      &__title {
        color: var(--textSize);
        background-color: #fff;
        padding: 15px;
        font-size: 15px;

        &__slot-title {
          color: var(--textSize);
          font-size: 14px;
        }
      }

      &__slot-icon {
        width: 25px;
        height: 25px;
      }
    }
  }
  .shuliang{
    position: absolute;
    padding: 4rpx;
    background-color: red;
    color: #fff;
    font-size: 20rpx;
    font-weight: 400;
    border-radius: 50%;
    right: 25%;
    min-width: 27rpx;
    top: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
</style>
